import React, { useEffect, useState } from "react";
import "./home.less";
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
import img from "@/assets/images/home/xiaolang.png";
import img1 from "@/assets/images/home/books.png";
import img2 from "@/assets/images/home/examination.png";
import img3 from "@/assets/images/home/practice.png";
import { HomeDataApi } from "@/api";
import SubjectListItem from "./components/SubjectListItem";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { Dispatch } from "redux";
import { SetActionCode } from "@/store/ActionType";
// 这是主页
export default function Home() {
  // 这是从服务器请求回来的数据
  const [state, setState] = useState<IHomeData>();
  const navigate = useNavigate();
  // 准备一个dispatch
  const dispatch = useDispatch<Dispatch<ISetActionCodeAction>>();
  // 发请求一定要在 mouted 里面
  useEffect(() => {
    HomeDataApi().then((res) => {
      if (res.errCode === 0) {
        setState(res.data);
        // 当进入首页，把默认的学科的actionCode 存到 redux
        dispatch({
          type: SetActionCode,
          pyload: res.data.exam.actionCode,
        });
      }
    });
  }, []);
  return (
    <div className="home">
      <section className="top flex between ver-center">
        <h2>{state?.exam.title}</h2>
        <p className="flex ver-center" onClick={() => navigate("/subjects")}>
          <span>切换考试科目</span>
          <ArrowRightIcon />
        </p>
      </section>
      <section className="bg">
        <p className="wel">欢迎Tomato来到XX学习库！</p>
        <div className="flex between">
          <section className="img">
            <img src={img} alt="" />
          </section>
          <section className="right">
            <ul className="flex count">
              <li>已学{state?.study}题</li>
              <li>共{state?.exam.itemCount}题</li>
            </ul>
            <ul className="flex between timu">
              <li className="flex flex-col ver-center">
                <span className="num">{state?.wrong}</span>
                <span className="tip">错题</span>
              </li>
              <li className="flex flex-col ver-center">
                <span className="num">{state?.collect}</span>
                <span className="tip">收藏</span>
              </li>
            </ul>
          </section>
        </div>
      </section>
      {/* 三个比较中间列表 */}
      <ul className="m-list flex">
        <li>
          <a href="#">
            <img src={img1} alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src={img2} alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src={img3} alt="" />
          </a>
        </li>
      </ul>

      <section className="sub-list">
        <div className="title flex">
          <h3>学科题库</h3>
          <p>坚持每一天，成长看得见</p>
        </div>
        {state?.exemItems.map((item) => (
          <SubjectListItem buttonText="练习" data={item} key={item.id} />
        ))}
      </section>
    </div>
  );
}
